<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收货地址 - MAN旗舰店</title>
    <link rel="stylesheet" href="../css/addresses.css">
</head>
<body>
    <header class="header">
        <!-- 同首页的头部 -->
    </header>

    <main class="addresses-container">
        <div class="profile-sidebar">
            <!-- 同个人资料页的侧边栏 -->
        </div>
        
        <div class="addresses-content">
            <h2>收货地址</h2>
            
            <button id="addAddressBtn" class="btn-primary">+ 添加新地址</button>
            
            <div class="addresses-list" id="addressesList">
                <!-- 地址将通过JavaScript动态加载 -->
            </div>
            
            <!-- 添加/编辑地址模态框 -->
            <div class="modal" id="addressModal">
                <div class="modal-content">
                    <span class="close-btn">&times;</span>
                    <h3 id="modalTitle">添加收货地址</h3>
                    <form id="addressForm">
                        <input type="hidden" id="addressId">
                        <div class="form-group">
                            <label for="name">收货人</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">手机号码</label>
                            <input type="tel" id="phone" name="phone" required>
                        </div>
                        <div class="form-group">
                            <label for="region">所在地区</label>
                            <div class="region-selector">
                                <select id="province" name="province" required>
                                    <option value="">请选择省份</option>
                                    <!-- 省份将通过JavaScript动态加载 -->
                                </select>
                                <select id="city" name="city" required disabled>
                                    <option value="">请选择城市</option>
                                </select>
                                <select id="district" name="district" required disabled>
                                    <option value="">请选择区县</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="detail">详细地址</label>
                            <input type="text" id="detail" name="detail" required>
                        </div>
                        <div class="form-group">
                            <label for="isDefault">
                                <input type="checkbox" id="isDefault" name="isDefault">
                                设为默认地址
                            </label>
                        </div>
                        <button type="submit" class="btn-primary">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <!-- 同首页的页脚 -->
    </footer>

    <script src="../js/utils.js"></script>
    <script src="../js/addresses.js"></script>
</body>
</html>